<%@page import="com.entity.ProImg"%>
<%@page import="com.biz.ProductBizImpl"%>
<%@page import="com.entity.Product"%>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML>
<html>
<head>
<base href="<%=basePath%>">

<title>商品详情</title>

<meta charset="UTF-8">
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="css/modle.css">
<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
<style type="text/css">
.main-body-div>div {
	border: 1px solid #DCDCDC;
	border-radius: 5px;
	margin: 10px;
	padding: 1%;
	font-size: 15px;
}

.pro-title {
	background-image: linear-gradient(225deg, #D4FFEC 0%, #57F2CC 48%, #4596FB 100%);
	padding: 10px;
	width: 500px;
	margin-left: 10px;
	padding-left: 20px;
	border-radius: 25px;
	color: white;
}

.pro-div {
	width: 700px;
	height: 400px;
	float: left;
	background-image: linear-gradient(-225deg, #FFFEFF 0%, #D7FFFE 100%);
}

#comments {
	width: 216px;
	height: 410px;
	padding-top: 0px;
	display: inline-block;
	border: 1px solid #DCDCDC;
	background-image: linear-gradient(-225deg, #FFFEFF 0%, #D7FFFE 100%);
}
.pro-info {
	float: left;
	width: 45%;
	height: 100%;
	padding: 5px;;
}

input[type='number'] {
	width: 50px;
	padding: 5px;
	margin: 5px;
}

#proprice {
	font-size: 20px;
	color: red;
}

#oldprice {
	font-size: 12px;
	text-decoration: line-through;
	color: #8b8b8b;
	margin-left: 10px;
}

.add {
	display: inline-block;
	height: 18px;
	text-decoration: none;
	background: orange;
	border-radius: 6px;
	padding: 5px;
	color: white;
	margin: 5px;
}

.add:hover {
	background: red;
}

#comments>p {
	padding: 10px;
}

#comments-title {
	text-align: center;
	color: blue;
	border: 1px solid #DCDCDC;
	border-radius: 5px;
	background: linear-gradient(to top, #f1f1f1, white, #f1f1f1);
}

#comments-content {
	font-size: 15px;
	line-height: 25px;
}

.pro-img {
	display: inline-block;
	width: 50%;
	height: 100%;
	border: 1px solid #f5f5f5;
	margin-right: 1%;
	float: left;
}
.img-proimg{
	display: inline-block;
	width: 100%;
	height: 80%;
	border-radius: 10px;
}
.img-proimg>img{
	width: 100%;
	height: 100%;
}
.pro-img-ul, .pro-img-ul-li {
	padding: 0;
	margin: 0;
	list-style: none;
}
.pro-img-ul {
	z-index: 100;
	width: 100%;
	height: 20%;
	margin: 0px;
	border: 1px solid #dcdcdc;
	text-align: center;
}
.pro-img-ul-li {
	display: inline-block;
	padding: 0px;
	margin: 15px 2px;
}
.pro-img-ul-li>img{
	width: 50px;
	height: 50px;
	border: 2px solid #dcdcdc;
	opacity: 0.6;
}
.pro-img-ul-li>img:hover{
	opacity: 1;
}
#pl-div{
	width: 700px;
	display: inline-block;
}
</style>
<script src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
		function add( addtype ){
			if(addtype=='shopcart'){
				$("#addform").attr("action","user/do/doAddShopCart.jsp");
			}else{
				$("#addform").attr("action","user/address?orders=1");
			}
			$("#addform").submit();
		}
		
		$(function(){
			$(".pro-img-ul-li").mouseover(function(){
				var img=$(this).find("img").attr("src");
				$(".pro-img-ul-li").find("img").css("border","2px solid #dcdcdc");
				$(this).find("img").css("border","2px solid orange");
				$(".img-proimg>img").attr("src",img);
			});
		});
		
	</script>
</head>
<% 
  	String id=request.getParameter("id");
  	Product p=new ProductBizImpl().getPro(Integer.parseInt(id));
  	List<ProImg> list=p.getImgs();
  	
  	/* //利用session存浏览记录
  	List<Product> bros=(List<Product>)session.getAttribute("brolist");
  	if(bros==null){
  		bros=new LinkedList<Product>();
  	}
  	if(bros.contains(p)==false){
	  	bros.add(0,p);
	  	session.setAttribute("brolist", bros);
  	} */
  %>
<body class="mybody">
	<div class="main">
		<div class="index-title">
			<iframe src="index-b-elem/header.jsp" frameborder="0" id="title-if"></iframe>
		</div>
		<div class="main-body-div">
			<h2 class="pro-title">商品详情</h2>
			<div class="pro-div">
				<div class="pro-img">
					<div class="img-proimg">
						<img src="<%=list.size()==0?"images/p1.png":list.get(0).getImgpath()%>"/>
					</div>
					<ul class="pro-img-ul">
						<li class="pro-img-ul-li" style="display:<%=list.size()==0?"inline-block":"none"%>"><img alt="商品图片" src="images/p1.png"/></li>
					<%
					String cover=null;
					for(ProImg pi:list){
					%>
						<li class="pro-img-ul-li"><img src="<%=pi.getImgpath()%>"/></li>
					<%
						if(pi.getIscover()==1){
							cover=pi.getImgpath();
						}
					}
					//利用cookie存浏览记录
					p.setProcover(cover);
				  	Cookie myck=new Cookie("bro_"+p.getId(),p.toString());
				  	myck.setPath("/");
				  	myck.setMaxAge(60*60);
				  	response.addCookie(myck);
					%>
					</ul>
				</div>
				<div class="pro-info">
					<form action="" method="post" id="addform">
						<h3 style="padding: 0px;font-size: 20px;"><%=p.getPname() %></h3>
						<input type="hidden" name="pid" value="<%=p.getId()%>" /> <input
							type="hidden" name="price" value="<%=p.getPrice()%>" />
						<p>
							现价：<span id="proprice">￥<%=p.getPrice()%></span><span
								id="oldprice">原价：￥<%=String.format("%.2f", p.getPrice()*1.2) %></span>
						</p>
						<p>
							库存：<span><%=p.getStock() %></span><input type="hidden"
								name="stock" value="<%=p.getStock()%>"/>
						</p>
						<p>
							类别：<span><%=p.getKindName() %></span>
						</p>
						<p>
							<textarea style="width: 100%;height: 100px;" name="comments"
								placeholder="给卖家的留言："></textarea>
						</p>
						<p>
							数量：<input type="number" name="num" id="num" value="1" min="1" />
							<a href="javascript:add('shopcart')" class="add">加入购物车</a>
							<a href="javascript:add('orders')" class="add">立即购买</a>
						</p>
					</form>
				</div>
			</div>
			<div id="comments">
				<p id="comments-title">商品简介</p>
				<p id="comments-content"><%=p.getComments() %></p>
			</div>
			<div>
				<div>
					<div id="pl-div">
						<h3>商品评论</h3>
						<ul>
							<li>
								<p>张三:<span style='text-align: right;'>评论时间:2018-9-23 10:30:00</span></p>
								<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
							</li>
							<li>
								<p>张三:<span>评论时间:2018-9-23 10:30:00</span></p>
								<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
							</li>
						</ul>
					</div>	
					<div>
					</div>
				</div>
			</div>
		</div>
		<div class="index-footer">
			<iframe src="index-b-elem/footer.jsp" frameborder="0" id="title-if"></iframe>
		</div>
	</div>
</body>
</html>
<jsp:include page="mybrowse.jsp"></jsp:include>